<template>
<!--    <div class="container-fluid">
      <div class="row">
        <div class="col-1"></div>
        <div class="col-10">
          <div class="w">
            <div>
              <img :src="prefix2+userData.face+'.jpg'" class="img">
              <span class="name">{{userData.name}}</span>
            </div>
          </div>
          &lt;!&ndash;          <div class="row">&ndash;&gt;
          &lt;!&ndash;            <div class="col-1">主页</div>&ndash;&gt;
          &lt;!&ndash;            <div class="col-1">历史记录</div>&ndash;&gt;
          &lt;!&ndash;            <div class="col-1">我的收藏</div>&ndash;&gt;
          &lt;!&ndash;            <div class="col-1">视频管理</div>&ndash;&gt;
          &lt;!&ndash;            <div class="col-2"></div>&ndash;&gt;
          &lt;!&ndash;            <div class="col-2"></div>&ndash;&gt;
          &lt;!&ndash;          </div>&ndash;&gt;
          <div style="padding: 20px">
            <div class="row">
              <div class="col-9">
                &lt;!&ndash;                我的视频&ndash;&gt;
                <div>
                  <div class="row">
                    <div class="col-2"><h4>Ta的视频</h4></div>
                    <div class="col-9"></div>
                    <div class="col-1"  >
                      &lt;!&ndash;                      这里进入我的所有视频页面&ndash;&gt;
                      <a href="javascript:"><input type="button" value="更多>"></a>
                    </div>
                  </div>
                  <div>
                    &lt;!&ndash;                  视频列表,这里展示至多6个视频&ndash;&gt;
                    <div class="row row-cols-1 row-cols-md-3 g-4"  v-for="(item,k) in videos" :key="k" @click="playVideo(item.videoid,true)">
                      <div class="col">
                        <div class="card">
                          <img class="card-img-top" alt="..." :src="request.pic(item.cover_pic)">
                          <div class="card-body">
                            <h5 class="card-title">{{ item.title }}</h5>
                            <p class="card-text">播放量：{{item.play_num}} 时间：{{item.up_time}} </p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <hr style="height: 1px;border: none;border-top: 1px solid deepskyblue"/>
                &lt;!&ndash;                我的专栏&ndash;&gt;
                <div v-if="false">
                  <div class="row">
                    <div class="col-2"><h4>我的专栏</h4></div>
                    <div class="col-9"></div>
                    <div class="col-1"  >
                      <form>
                        <a href=""><input type="button" value="更多>"></a>
                      </form>
                    </div>
                  </div>
                  <div class="row row-cols-1 row-cols-md-3 g-4"  >
                    &lt;!&ndash;                  专栏列表&ndash;&gt;
                    <div class="col">
                      <div class="card">
                        <img src="1.jpeg" class="card-img-top" alt="...">
                        <div class="card-body">
                          <h5 class="card-title">标题</h5>
                          <p class="card-text">播放量： 时间： </p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <hr style="height: 1px;border: none;border-top: 1px solid deepskyblue"/>
              <div class="col-3">
                <div v-if="false">
                  <span>获赞数:</span><br><br>
                  <span>关注数:</span><br><br>
                  <span>粉丝数:</span><br><br>
                  <span>播放数:</span><br><br>
                  <span>阅读数:</span>
                </div>
                <br>
                <div>
                  <h5>Ta的个性签名</h5>
                  <textarea readonly>
                    </textarea>
                </div>
                <div>
                  <h4>个人资料</h4>
                  <span>用户id：{{userData.uuid}}</span>
                  <span>email：{{userData.email}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-1">
        </div>
      </div>

    </div>
  </div>-->
  <div class="container-fluid">
    <div class="row">
      <div class="col-2"></div>
      <div class="col-8"  >
        <div v-if="false">
          <div class="w">
            <img src="/src/assets/2.jpeg" class="img">
            <span class="name">曾渝晋</span>
          </div>
<!--          <div style="background-color: turquoise">
            <div class="row">
              <div class="col-1"><a href="">我的主页</a></div>
              <div class="col-1"><a href="">历史记录</a></div>
              <div class="col-1"><a href="">我的收藏</a></div>
              <div class="col-1"><a href="videomanage.html">视频管理</a></div>
              <div class="col-2"></div>
              <div class="col-2"></div>
            </div></div>-->
        </div>


        <div class="row">
          <div class="col-9">
            <div style="padding-top: 40px">
              <h3>个人信息</h3>
              <span>请选择头像</span>
              <div>
                <form>
                <img :src="facesrc" style="border-radius:100% ;width: 200px;height: 200px ">
                <input type="file" name="face" @change="changeFace">

                  <div class="mb-3" style="width: 500px;">
                    <label for="formGroupExampleInput" class="form-label">用户名</label>
                    <input type="text" class="form-control" id="formGroupExampleInput" name="username"  required readonly v-model="userData.name">
                  </div>
                  <div class="mb-3" style="width: 500px;">
                    <label for="formGroupExampleInput2" class="form-label">邮箱</label>
                    <input type="text" class="form-control" id="formGroupExampleInput2" required name="email" readonly v-model="userData.email">
                  </div>
                  <div class="mb-3" style="width: 500px;">
                    <label for="formGroupExampleInput" class="form-label">密码</label>
                    <input type="password" class="form-control" id="formGroupExampleInput3" name="password" required v-model="userData.pwd">
                    <template v-if="false">
                      <button @click="changepwd=true" class="btn btn-primary ms-5" type="button" v-if="!changepwd">修改密码</button>
                      <button @click="changepwd=false" class="btn btn-outline-primary ms-5" type="button" v-if="changepwd">取消修改密码</button>
                      <button  class="btn btn-outline-primary ms-5"  v-if="changepwd">取消修改密码</button>
                      <input type="password" name="new" class="form-control mb-3" v-if="changepwd" placeholder="请输入新密码" pattern="\S">
                      <input type="password" name="cnfrm-new" class="form-control mt-3" v-if="changepwd" placeholder="请确认新密码" @blur="null" pattern="\S">
                    </template>
                  </div>
                  <div class="mb-3" style="width: 500px;">
                    <label for="formGroupExampleInput2" class="form-label">签名</label>
                    <input type="text" class="form-control" id="formGroupExampleInput4" name="info" required v-model="userData.info">
                  </div>
                  <input type="button" value="保存" @click="updateInfo">
                </form>
              </div>
            </div>
          </div>
          <div class="col-3" v-if="false">
            <div>
              <span>获赞数:</span><br><br>
              <span>关注数:</span><br><br>
              <span>粉丝数:</span><br><br>
              <span>播放数:</span><br><br>
              <span>阅读数:</span>
            </div>
            <br>
            <div>
              <form>
                <h5>我的公告</h5>
                <textarea>

                             </textarea>
                <input type="submit" value="修改">
              </form>
            </div>
            <div>
              <h4>个人资料</h4>
              <span>uid：</span>
              <span>生日：</span>
            </div>
          </div>
        </div>
      </div>
      <div class="col-2"></div>
    </div>


  </div>

</template>

<script setup lang="ts">
import {inject, ref, Ref} from 'vue';
import request from "@/hooks/request";
import {UserData} from "@/types/AllData";

const aComponent = inject('aComponent')
const changeComponent = inject('changeComponent')
const userId=inject<Ref<number>>('uuid')
const userData=ref({email: "", face: "", info: "", name: "", uuid: 0,pwd:''})
const videos= ref([]);
request.get('user/getVideoRepository',{uuid:userId?.value,page:1,num:20}).then(re=>{
  videos.value=re
})
const facesrc=ref(request.face(userData.value.face))
request.get('user/getCurrent').then(re=>{
  userData.value=re
  facesrc.value=request.face(userData.value.face)
})

const changeFace=async ()=>{
  let formData=new FormData(document.forms[1])
  let file=formData.get('face')
  if (file) {
    let url = URL.createObjectURL(file)
    facesrc.value=url
  }

}

const changepwd=ref(false)
const updateInfo=async ()=>{
  let form=document.forms[1]
  if (!form.reportValidity())
    return
  let cnfrm=confirm('确定要修改信息吗？')
  if (cnfrm==false)
    return
  let formData=new FormData(document.forms[1])
  request.post('user/change_info',null,formData).then(resp=>{
    if (resp){
      alert('修改成功')
    }else {
      alert('修改失败')
    }
  })
}

</script>
<style src="../assets/css/audit.css" scoped/>
<style src="../assets/css/finished.css" scoped/>
<style scoped>

</style>